<template>
  <div v-if="tip">
    <n-tooltip placement="top-start" trigger="hover">
      <template #trigger>
        <div class="flex items-center" :class="date?'space-x-1':''" :style="`font-size: ${size}px`">
          <n-icon v-if="icon">
            <icon :icon="icon"></icon>
          </n-icon>
          <div v-if="date">{{ formatted }}</div>
        </div>
      </template>
      {{ tip }}
    </n-tooltip>
  </div>
  <div v-else>
    <div class="flex items-center" :class="date?'space-x-1':''" :style="`font-size: ${size}px`">
      <n-icon v-if="icon">
        <icon :icon="icon"></icon>
      </n-icon>
      <p v-if="date">{{ formatted }}</p>
    </div>
  </div>

</template>

<script setup lang="ts">

import {Icon} from "@iconify/vue";
import {useDateFormat} from "@vueuse/core";

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  date: {
    type: String,
    default: ''
  },
  dateFormat: {
    type: String,
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  size: {
    type: Number,
    default: 18
  },
  tip: {
    type: String,
    default: ''
  }
})
const formatted = useDateFormat(props.date, props.dateFormat)
</script>

<style scoped>

</style>